<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{padding: 0;border:0;margin: 0;outline: 0;box-sizing: border-box;}
			span{display: inline-block;}
			.screen{height: 300px;border: 4px solid #000;background-color: #222;color: #fff;padding: 10px;overflow:auto;}
			.input-box{height: 40px;line-height: 40px;border-bottom: 1px solid #ddd;}
			.input-box input{height: 100%;width: 90%;float: left;padding: 0 10px;}
			.input-box .submit{height: 100%;width: 10%;float: right;background-color: #8ac;color: #fff;text-align: center;cursor: pointer;}
			.txt-left{text-align: left;}
			.txt-right{text-align: right;}
			.txt-left,.txt-right{height: 24px;line-height: 24px;width: 100%;}
			.name{color: #e33;float:left;margin-right:10px;}
		</style>
	</head>
	<body>
		<div class="screen" id="screen" data-id="124" data-type="div" title="这是一个div"></div>
		<div class="input-box">
			<input class="content" type="text" name="" placeholder="在此输入聊天信息" id="content">
			<span class="submit" id="submit">发送信息</span>
		</div>
		<script type="text/javascript">
			/*
				思路步骤：
				第一步：实现一个聊天界面
				第二步：自己发送的信息，能够显示在屏幕上。
				第三步：信息能够存储到本地的localStorage。
				第四步：其他页面，能够接受信息并显示。(需要刷新)
				第五步：用定时器（setInterval），自动刷数据。
			*/
			var screen = document.getElementById('screen');
			var content = document.getElementById('content');
			var submit = document.getElementById('submit');
			var userid = new Date().getTime();
			if(!sessionStorage.userid){ // !'' == true
				sessionStorage.userid = userid;
			}
			console.dir(screen);
			screen.onmousewheel = function(){
				console.log('scrollTop:'+screen.scrollTop);
				console.log('scrollHeight:'+screen.scrollHeight);
			}
			submit.onclick = function(){
				var date = new Date();
				var time = date.getTime(); // 实现信息存储到本地不被覆盖
				var rowMsg = "<div>" + content.value + "</div>";
				screen.innerHTML += rowMsg;   // 实现输入的信息显示在屏幕上
				localStorage[time] = JSON.stringify({userid:sessionStorage['userid'],msg:rowMsg}); // 把对象转化成字符串对象
				content.value = '';
			}


			setInterval(function(){
				var str = '';
				for(var i in localStorage){ // localStorage 是一个对象，对象用 for...in...遍历。
					var res = JSON.parse(localStorage[i]); // 把字符串对象，变成一个对象。
					if(res['userid'] == sessionStorage['userid']){
						str += '<div class="txt-left"><span class="name">'+res.userid+'</span>' + res['msg'] + '</div>';
					}else{
						str += '<div class="txt-right"><span class="name">'+res.userid+'</span>' + res['msg'] + '</div>';
					}
					screen.innerHTML = str;
					screen.scrollTop = screen.scrollHeight;
				}
			},1000);
			
		</script>
	</body>
</html>